<template>
 <el-card>
    <div slot="header" class="clearfix">
      <span>个人资料</span>
    </div>
    <div>
      <!-- left  -->
      <div style="width: 32%;float: left;text-align: center;margin: 10px 0;">
        <el-avatar :src="this.UserInfoList.avatar" :size="130"></el-avatar></br></br>
        <!-- 头像上传 -->
        <el-upload
         :action="BASE_API+'/fileUpload'"
         name="picture"
         :show-file-list="false"
         :before-upload="beforeUpload"
         :on-success="handleSuccess">
         <el-button type="primary" plain round size="small">修改头像<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-upload>
      </div>
      <!-- right -->
      <div class="IdInfo">
        <p>
          &emsp;用户ID：{{this.UserInfoList.id}}
        <span style="float: right;color: #3399EA;" @click="goBack()">
          <a style="color: #3399EA;" href="#">回到主页
            <i class="el-icon-arrow-right"></i>
          </a>
        </span>
        </p>
        <p style="text-indent: 1rem ;">登陆IP：{{this.UserInfoList.ip}}</p>
        <p>注册时间：{{this.UserInfoList.createTime}}</p>
        <p>上次登陆：{{this.UserInfoList.updateTime}}</p>
        <!-- 分隔符 -->
        <el-divider></el-divider>

        <!-- 修改资料前展示 -->
        <div v-show="this.show">
          <p>账户昵称：{{this.UserInfoList.username}}
          <span style="float: right;color: #3399EA;" @click="changeInfo()">
            <router-link to='' :style="{color:'#3399EA'}">
              修改资料
              <i class="el-icon-arrow-right"></i>
            </router-link>
          </span>
          </p>
          <p style="text-indent: 2rem;">性别：{{this.UserInfoList.sex}}</p>
          <p>工作地址：{{this.UserInfoList.workAddress}}</p>
          <p>家庭地址：{{this.UserInfoList.familyAddress}}</p>
          <p style="padding-bottom: 3rem;">个人简介：
            <span style="font-size: 14px;">{{this.UserInfoList.personIntro}}</span>
          </p>
        </div>

        <!-- 修改资料后展示 -->
        <div v-show="!this.show">
          <p>&emsp;&emsp;昵称：<el-input v-model="UserInfoList.username" placeholder="请输入内容" size="mini"   type="text" maxlength="10" show-word-limit></el-input></p>
          <p>&emsp;&emsp;性别：<el-input v-model="UserInfoList.sex" placeholder="请输入内容" size="mini" type="text" maxlength="2" show-word-limit></el-input></p>
          <p>工作地址：<el-input v-model="UserInfoList.workAddress" placeholder="请输入内容" size="mini" type="text" maxlength="50" show-word-limit></el-input></p>
          <p>家庭地址：<el-input v-model="UserInfoList.familyAddress" placeholder="请输入内容" size="mini" type="text" maxlength="50" show-word-limit></el-input></p>
          <p style="display: flex;">个人简介：
            <el-input
              type="textarea"
              placeholder="请输入内容"
              v-model="UserInfoList.personIntro"
              maxlength="100"
              rows="8"
              size="mini"
              show-word-limit
            >
            </el-input>
          </p>
          <div style="margin: 40px 100px;display: flex;justify-content: space-around;">
            <el-button type="info" size="small" @click="goCenterInfo()">取消</el-button>
            <el-button type="danger" size="small" @click="updateInfo()">确定</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
  import UserApi from '@/api/user'
  import mixins from '@/mixins'
  export default{
    mixins:[mixins],
    data(){
      return{
         show:true,
         //存储UserInfo
         UserInfoList:{
           id:'',
           ip:'',
           createTime:'',
           updateTime:'',
           avatar:'',
           username:'',
           sex:'',
           workAddress:'',
           familyAddress:'',
           personIntro:'',
           email:''
         },
         // 接口API地址
         BASE_API: process.env.BASE_API,
      }
    },
    methods:{
      goBack(){
        this.$router.push({
          path:"/"
        })
      },
      changeInfo(){
        this.show = false
        this.$router.push({
          path:'/user/card'
        })
      },
      goCenterInfo(){
        this.show = true;
        //路由发生变化
        this.$router.push({
          path:'/user/card'
        })
      },
      //更新UserInfo
      updateInfo(){
        UserApi.updateUserCenterInfo(this.UserInfoList).then(response => {
          if(response.data.isSuccess){
            //获取新的数据  将sessionStroage里面的数据更换
            this.AddUserCenterInfo(response.data.User)
            this.$message({
              showClose: true,
              message:"修改成功",
              type:'success',
              center: true
            })
            this.show = true
            //路由发生变化
            this.$router.push({
              path:'/user/card'
            })
          }else{
            this.$message({
              showClose: true,
              message:"非法请求",
              type:'error',
              center: true
            })
          }
        })
      },
      //文件上传成功的钩子函数
      handleSuccess(res, file){
          this.$message({
              type: 'success',
              message: '上传成功',
              duration: 1000,
              center: true
          });
          // console.log(file.response)
          this.UserInfoList.avatar = file.response.imgUrl
          //将用户图片avatar进行更换
          UserApi.updateAvatar(this.UserInfoList.avatar).then(response => {
            if(response.data.isSuccess){
              this.AddUserCenterInfo(this.UserInfoList)
            }
          })
      },
      //文件上传前的前的钩子函数
      //参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
      beforeUpload(file) {
          const isJPG = file.type === 'image/jpeg';
          const isGIF = file.type === 'image/gif';
          const isPNG = file.type === 'image/png';
          const isBMP = file.type === 'image/bmp';
          const isLt2M = file.size / 1024 / 1024 < 2;

          if (!isJPG && !isGIF && !isPNG && !isBMP) {
              this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
          }
          if (!isLt2M) {
              this.$message.error('上传图片大小不能超过 2MB!');
          }
          return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
      },
    },
    created() {
      this.UserInfoList.id = this.UserInfo.id,
      this.UserInfoList.ip = this.UserInfo.ip,
      this.UserInfoList.createTime = this.UserInfo.createTime,
      this.UserInfoList.updateTime = this.UserInfo.updateTime,
      this.UserInfoList.avatar = this.UserInfo.avatar,
      this.UserInfoList.username = this.UserInfo.username,
      this.UserInfoList.sex = this.UserInfo.sex,
      this.UserInfoList.workAddress = this.UserInfo.workAddress,
      this.UserInfoList.familyAddress = this.UserInfo.familyAddress,
      this.UserInfoList.personIntro = this.UserInfo.personIntro
      this.UserInfoList.email = this.UserInfo.email
    },
  }
</script>

<style scoped="scoped">
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      padding: 12px 20px;
      border-bottom: #000000;
      display: table;
      content: "";
    }
   .clearfix:after {
      clear: both
    }
    .clearfix span{
      color: #000000;
      font-size: 20px;
      font-weight: 900;
    }
    .box-card {
      /* width: auto */
      height: auto;
    }
    .el-card__body{
      height: auto;
    }
    .el-card__header{
      padding: 30px 20px;
    }
    .el-card{
      background-color: #FFFFFF;
    }
    .IdInfo{
      width: 65%;
      float: right;
      /* background-color: #009688; */
      height: auto;
      margin: 1px 5px;
    }
    .IdInfo p{
      margin: 10px 15px;
    }
    .el-input{
      width: 50%;
    }
    .el-textarea{
      width: 50%;
    }
    .el-button{
      width: 100%;
    }
</style>
